
// 顶部
$('header').load('header.html', function () {
    $('#carousel-left').css({
        backgroundColor: 'white',
        border: ' 1px solid #ff6a00'
    })
    $('#carousel-left ul li').css({
        color: '#424242'
    })
    $('#carousel-left ul li span').css({
        color: '#b0b0b0'
    })
// 判断登陆状态
class judgment{
    constructor(){
        this.temporary();
        this.logOut();
    }
    temporary(){
        let getName=JSON.parse(getCookie('pass'));
        if(getName){
            $('.header-right ol li').eq(0).html('欢迎').css('color','red');
            $('.header-right ol li').eq(1).html(getName.id).css('color','red');
        }
    }
    // 注销
    logOut(){
        $('.header-right ol li').eq(2).on('click',function(){
            delCookie('pass');
            location.reload(true);
        })
    }
}
new judgment();
});
// 足部
$('footer').load('footer.html');

//   头部下面的粘性说明
class details {
    constructor() {
        this.position();
    }
    position() {
        $(window).on('scroll', function () {
            let top = $('#details').offset().top;
            let height = $('#details').height();
            let dic = $('body,html').scrollTop();

            if (dic > top + height) {
                $('#details').css({
                    position: 'sticky',
                    backgroundColor: 'white',
                    top: '-80px'
                }).animate({
                    top: '0px'
                }, 500)
            } else if (dic < top) {
                $('#details').css({
                    position: 'relative',
                    backgroundColor: 'white',
                })
            }
        })
    }
}
new details();


// 放大镜
class magnifier {
    constructor(arrImg) {
        this.arr = arrImg;
        this.hide();
        this.show();
        this.boxMove();
        //this.setImg()
        //this.btn();
        this.timer();
    }
    hide() {
        $('#magnifier #small-box').on('mouseleave', function () {
            $('#shadow-box,#big-box').stop().hide();
        })
    }
    show() {
        $('#magnifier #small-box').on('mouseenter', function () {
            $('#shadow-box,#big-box').stop().show().css({
                cursor: 'move'
            });
        })
    }
    boxMove() {
        $('#small-box').on('mousemove', function (e) {
            //    小照片
            let left = e.pageX - $('#shadow-box').width() / 2;
            let top = e.pageY - $('#shadow-box').height() / 2;
            let maxLeft = $('#small-box').width() + $('#small-box').offset().left - $('#shadow-box').width();
            let maxTop = $('#small-box').height() + $('#small-box').offset().top - $('#shadow-box').height();


            if (left < $('#small-box').offset().left) {
                left = $('#small-box').offset().left;
            }
            if (top < $('#small-box').offset().top) {
                top = $('#small-box').offset().top;
            }
            if (left > maxLeft) {
                left = maxLeft;
            }
            if (top > maxTop) {
                top = maxTop;
            }
            $('#shadow-box').offset({
                left: left,
                top: top
            })
            //    大照片
            let x = $('#big-box').width() / $('#small-box').width() * (e.pageX - $('#shadow-box').width() / 2 - $('#small-box').offset().left);
            let y = $('#big-box').height() / $('#small-box').height() * (e.pageY - $('#small-box').offset().top);
            $('#big-box img').css({
                left: -x,
                top: -y
            })

        })
    }
    timer() {
        let time = setInterval(function () {
            $('#btnRight').stop().click();
        }, 3000);
        $('#small-box').on('mouseenter', function () {
            clearInterval(time)
        })
        $('#small-box').on('mouseleave', function () {
            time = setInterval(function () {
                $('#btnRight').stop().click();
            }, 3000);
        })

      
    }
}
let arrImg;
new magnifier(arrImg)

// 选择
class choose {
    constructor() {
        this.setCon();
    }

    // 设置内容
    setCon() {
        $.get('../php/goods1.json', function (data) {

            // var keys = Object.keys(data);
            var values = Object.values(data);
            // console.log(keys);
            //console.log(values);
            let details = values[0].split(',')

            //  注入details-left内容
            for (let i = 0; i < details.length; i++) {
                $('#details .details-left a').eq(i).html(details[i]);
            }
            // 注入name
            $('#introduction .title h3').html(values[1]);
            //  注入描述
            $('#introduction .title span').html(values[2]);
            $('#introduction .title h6').html(values[3]);


            //  储存颜色种类
            //console.log(Array(values[4])[0].length);
            // 解析出具体颜色
            //console.log(Object.keys(Array(values[4])[0][1])[0]);
            //  注入颜色
            let num=0;
            for (let i = 0; i < Array(values[4])[0].length; i++) {
                $('#introduction .color ul').append("<li>" + Object.keys(Array(values[4])[0][i])[0] + "</li>")
            }
           
                $('#introduction .color ul li').eq(0).addClass('choosed').siblings().removeClass('choosed');
                let arrImg =( Object.values((values[4][0])))[0].split(',');
                for (let i = 0; i < arrImg.length; i++) {
                    $('#dark ul').append($('<li></li>'));
                }
                    //console.log(arrImg[1]);
                    $('#dark ul li').eq(0).addClass('checked').siblings().removeClass();
                    $('#small-box .one').html(`<img src=${arrImg[num]}>`);
                    $('#big-box').html(`<img src=${arrImg[num]}>`); 
            $('#btnRight').on('click', function () {
                $('#small-box .one').stop().fadeOut(0);
                num++;
                if (num >= arrImg.length) {
                    num = 0;
                }
                $('#small-box .one').html(`<img src=${arrImg[num]}>`);
                $('#big-box').html(`<img src=${arrImg[num]}>`);
                $('#dark ul li').eq(num).addClass('checked').siblings().removeClass();
                $('#small-box .one').fadeIn(300);
    
            })
            $('#btnLeft').on('click', function () {
                $('#small-box .one').stop().fadeOut(0);
                num--;
                if (num < 0) {
                    num =arrImg.length - 1;
                }
                $('#small-box .one').html(`<img src=${arrImg[num]}>`);
                $('#big-box').html(`<img src=${arrImg[num]}>`);
                $('#dark ul li').eq(num).addClass('checked').siblings().removeClass();
                $('#small-box .one').fadeIn(300);
            })
            // 点击时更改图片


            $('#introduction .color ul li').on('click', function () {
                $(this).addClass('choosed').siblings().removeClass('choosed');
                arrImg =( Object.values((values[4][$(this).index()])))[0].split(',');
                $('#btnRight').click();
                var str=$('#introduction .title h3').html()+' '+$('#introduction .version .choosed').html()+' '+$('#introduction .color .choosed').html();
             $('#introduction .sure p').html(str);
             })
            //  储存种类
            //console.log(Array(values[5])[0].length);
            // 解析出具体型号
            //console.log(Object.keys(Array(values[5])[0][1])[0]);

            for (let i = 0; i < Array(values[5])[0].length; i++) {
                $('#introduction .version ul').append("<li>" + Object.keys(Array(values[5])[0][i])[0] + "</li>")
            }
            $('#introduction .title i').html(Object.values(Array(values[5])[0][0])[0]);
            $('#introduction .sure em').html(Object.values(Array(values[5])[0][0])[0]);
            //console.log(Object.values(Array(values[5])[0][1])[0]);
            $('#introduction .version ul li').on('click', function () {
                $('#introduction .title i').html(Object.values(Array(values[5])[0][$(this).index()])[0]);
                $('#introduction .sure em').html(Object.values(Array(values[5])[0][$(this).index()])[0]);
                $(this).addClass('choosed').siblings().removeClass('choosed');
                let price=$('#introduction .sure em').html()+'元';
                $('#introduction .sure span').html(price);
                var str=$('#introduction .title h3').html()+' '+$('#introduction .version .choosed').html()+' '+$('#introduction .color .choosed').html();
             $('#introduction .sure p').html(str);
            })
            $('#introduction .version ul li').eq(0).click();
            $('#introduction li').on('mouseenter', function () {
                $(this).addClass('choose').siblings().removeClass('choose');
            })
            $('#introduction li').on('mouseleave', function () {
                $('#introduction li').removeClass('choose');
            })






        })
    }
}
new choose();


// 加入新商品
class addGoods{
    constructor(){
        this.newGoods();
    }
    newGoods(){

        
        $('#introduction .buy').on('click',function(){
            // 名字
            let name=$('#introduction .sure p').html();
            // 价格
            let price=$('#introduction .sure em').html();
   
            let img=$('#magnifier #small-box .one').html().slice(10,-2);
           
            let goods1=JSON.stringify({'name':name,'price':price,'img':img})
            setCookie('goods',goods1);
            
            alert('加入购物车成功');
        })
    }
}
new addGoods();


